<template>
	<view class="box ">
		<view class="mt-15 text-center ">
			<text>￥</text>
			<text class="size-40 ">{{price}}</text>
		</view>
		<view class="text-center size-26 ">
			<text class="mr-10 ">如订单取消,退款实时到账</text>
		</view>
		<view class="card shadow ">
			<view class="plr-36 ">
				<u-radio-group iconPlacement="right" placement="column" v-model="payment">
					<view class="radio-val flex-row ">
						<view class="flex flex-row ">
							<u-icon color="#FD3502" name="red-packet" size="28"></u-icon>
							<view>
								<view class="icon-title ">余额抵扣</view>
								<view class="icon-des ">可用余额{{userInfo.now_money}}元</view>
							</view>
						</view>
						<u-radio :name="1"></u-radio>
					</view>
					<view class="radio-val flex-row ">
						<view class="flex flex-row ">
							<u-icon color="#0BB90B" name="weixin-circle-fill" size="28"></u-icon>
							<view class="icon-title ">微信</view>
						</view>
						<u-radio :name="3"></u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view @click="payOrder" class="fixed-bottom pd-36  " v-if="price!=0">
			<u-button  type="primary">确认支付</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				option: {},
				order_id: "",
				time: 0,
				payment: 1,
				code: "",
				price: 0,
				userInfo: {},
				pay_type: 1
			}
		},
		onLoad(e) {
			if (e.orderid) {
				this.order_id = e.orderid;
			}
		},
		onShow() {
			this.getOrder();
			this.getUserInfo();
		},

		methods: {
			getUserInfo() {
				this.$api['post']('user/refresh-user').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				});
			},
			getOrder() {
				this.$api["get"]("order/get-order", {
					orderid: this.order_id
				}).then(e => {
					if (e.code == 200) {
						this.price = e.data.price
					}

				});
			},
			payOrder() {
				var t = this;
				if (0 == this.price) return this.$toast({
					title: "请支付真实订单价格"
				});
				switch (this.payment) {
					case 1:
						this.$api['post']("order/pay-order-by-balance", {
							orderid: this.order_id,
							pay_type: this.pay_type
						}).then(e => {
							if (e.code == 200) {
								this.notice();
								this.goOrder();
							} else {
								this.$toast({
									title: e.message
								});
							}

						});

						break;
					case 2:
						/*u.default.payOrder({
							orderid: this.order_id,
							type: "ali",
							pay_type: this.pay_type
						}).then((function(n) {
							var r = n.data;
							e.requestPayment({
								provider: "alipay",
								orderInfo: r.jsConfig,
								success: function(e) {
									t.notice(), t.goOrder()
								},
								fail: function(e) {
									d.default.toast(t.$t("取消支付") + "!")
								}
							})
						}));*/
						break;
					case 3:
						this.$api['post']("order/pay-order", {
							orderid: this.order_id,
							type: "wechat",
							pay_type: this.pay_type
						}).then((function(n) {
							var r = n.data;
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: r,
								success: function(e) {
									t.notice(), t.goOrder()
								},
								fail: function(e) {
									d.default.toast(t.$t("取消支付") + "!")
								}
							})
						}));
						break;
					case 4:
						u.default.payOrder({
							orderid: this.order_id,
							type: "wechatMP",
							pay_type: this.pay_type
						}).then((function(n) {
							var r = n.data;
							e.requestPayment({
								provider: "wxpay",
								timeStamp: r.timeStamp.toString(),
								nonceStr: r.nonceStr,
								package: r.package,
								signType: r.signType,
								paySign: r.paySign,
								success: function(e) {
									t.notice(), t.goOrder()
								},
								fail: function(e) {
									this.$toast({
										title: "取消支付!"
									})
								}
							})
						}))
				}
			},
			goOrder() {
				uni.redirectTo({
					url: "/pages/neworder/enroute?orderid=".concat(this.order_id)
				})
			},
			notice() {
				if (this.pay_type == 1) {
					//playAudio
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.u-primary-hover {
		background: linear-gradient(90deg, #00b6b4, #00d496) !important
	}

	.u-radio {
		display: -webkit-flex;
		display: flex;
		flex-direction: row-reverse
	}

	.u-radio-group {
		width: 100% !important
	}

	.u-radio__label {
		width: 100%
	}

	.mt-15 {
		padding-top: 80upx
	}

	.mt-15 .size-40 {
		font-size: 100upx
	}

	.mr-10 {
		color: #999
	}

	.flex,
	.radio-val {
		display: -webkit-flex;
		display: flex
	}

	.radio-val {
		align-items: center;
		justify-content: space-between;
		margin: 30upx
	}

	.icon-title {
		margin-left: 20upx
	}

	.icon-des {
		color: #999;
		font-size: 22upx;
		margin-left: 20upx
	}

	.card {
		background-color: #fff;
		border-radius: 20upx;
		margin: 80upx 30upx
	}
</style>